<html>
  <head>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="main.css" type="text/css" media="screen">
  </head>
  <body>


  <h2> Dados exemplo </h2>
  <h3> base de dados: </h3>
  <div id="output"></div>

  <script id="source" language="javascript" type="text/javascript">

  $(function () 
  {
    //-----------------------------------------------------------------------
    // Envia o pedido http por Ajax para o ficheiro PHP
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: 'sys.php',                  //o ficheiro php que obtem a informaçao da base de dados          
      data: "",                        //pode introduzir aqui os parametros a passar para o sys.php
                                       //por ex.: "id=1&nome=Vizinho"
      dataType: 'json',                //Formato da informação a receber      
      success: function(data)          //Ao receber a informação executa
      {
              
   for (var i = 0 ; i < data.length ; i++) { //Percorre o número de registos e vai adicionando linhas com a informação
           var id = data[i].id;              
           var vname = data[i].nome;  
          $('#output').append("<div id='" +id+ "' ><p><b>name:</b> "+vname+" </p></div>" );  //Cria DIV's com o respectivo ID e insere o nome 

          // <b>id: </b>"+id+" -> adiciona uma coluna com o ID no html
        };

      } 
    });
  }); 

  </script>
  </body>
</html>